import { inject, onMounted, ref, watch, ComponentOptions } from "vue"
import { setValueByModel } from "./../util"
import { ProvideEditStateKey } from "./../keys"
import { logInfo } from "./../log"

export function useEditComponents (props: CellProps) {
    const { checkReadyEdit, editCellState } = inject(ProvideEditStateKey) as EditCellStateResult

    const inputRef = ref()
    const visible = ref<boolean>(false)

    onMounted(() => {
        // 不可见时
        if (visible.value === false) {
            logInfo('编辑组件不可见，将启动状态与事件监听.')

            watch(() => editCellState.value.status, (status) => {
                if (status === 'doing'){
                    visibleComponent()
                    focusInput()
                }
            })

            const inputChild = findInput()
            if (inputChild) {
                inputChild?.addEventListener('keydown', kedownHandel)
                focusInput()
            }

        }
    })


    /**
     * 切换显示编辑组件
     */
    function visibleComponent(){
        visible.value = true;
        editCellState.value.status = 'doing'
    }
    /**
     * 输入控件keydown事件
     */
    function kedownHandel(e: KeyboardEvent) {
        if (
            e?.metaKey ||
            e?.ctrlKey ||
            [
              8, // BackSpace
              9, // Tab
              12, // Clear
              13, // Enter
              16, // Shift
              17, // Ctrl
              18, // Alt
              19, // Pause
              20, // Cape Lock
              27, // Esc
              32, // Spacebar
              33, // Insert
              37, // Left Arrow
              38, // Up Arrow
              39, // Right Arrow
              40, // Dw Arrow
              45, // Insert
              91, // Command
              93, // 右键菜单
              144, // Num Lock/
              145, // Scr lk
              192, // ~
              255, // Fn
            ].includes(e.keyCode) || 
            // Page Up、Page Down、End、Home
            (e.keyCode >= 33 && e.keyCode <= 36) || 
            // F1 - F12
            (e.keyCode >= 112 && e.keyCode <= 123) || 
            // 搜索、收藏、浏览器、静音、音量减、音量加
            (e.keyCode >= 170 && e.keyCode <= 175) || 
            // 停止、邮件
            (e.keyCode >= 179 && e.keyCode <= 180)
          ) {
            return true;
          }
        if (checkReadyEdit(props.rowIndex, props.colIndex)) {
            if (props.record && props.column?.dataIndex) {
                setValueByModel(props.column.dataIndex, props.record, undefined)
            }
            visibleComponent()
        }
    }
    /**
     * 自动聚焦输入框
     */
    function focusInput(){
        const inputChild = findInput()
        if (inputChild) {
            inputChild?.focus?.()
        } 
    }
    /**
     * 查找输入控件的dom节点
     * @returns 
     */
    function findInput(){
        if (['INPUT', 'TEXTAREA'].includes(inputRef.value?.tagName)) {
            return inputRef.value
        }
        return inputRef.value?.querySelector?.('input, textarea, select')
    }

    return { inputRef, visible, visibleComponent }
    
}

export function useEditComponentOptions (): ComponentOptions {
    return {
        props: ['column', 'record', 'rowIndex', 'colIndex', 'isRowindex']
    }
}